<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>推广统计中心</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        }

        :root {
            --primary: #2196F3;
            --primary-dark: #1976D2;
            --primary-light: #E3F2FD;
            --accent: #FF9800;
            --success: #4CAF50;
            --warning: #FFC107;
            --error: #F44336;
            --text-dark: #263238;
            --text-medium: #546E7A;
            --text-light: #90A4AE;
            --background: #F5F9FC;
            --card-bg: #FFFFFF;
        }

        body {
            background-color: var(--background);
            color: var(--text-dark);
            max-width: 750px;
            margin: 0 auto;
            padding-bottom: 80px;
        }

        /* 顶部区域 */
        .header {
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            color: white;
            padding: 20px;
            border-radius: 0 0 20px 20px;
            box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3);
            position: relative;
            overflow: hidden;
            z-index: 100;
        }

        .header::before {
            content: "";
            position: absolute;
            top: -50px;
            right: -50px;
            width: 200px;
            height: 200px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            z-index: -1;
        }

        .top-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .back-btn {
            background: rgba(255, 255, 255, 0.2);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            color: white;
            transition: all 0.3s ease;
        }

        .back-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.05);
        }

        .page-title {
            font-size: 24px;
            font-weight: bold;
            text-align: center;
            flex: 1;
        }

        .user-info {
            display: flex;
            align-items: center;
            background: rgba(255, 255, 255, 0.2);
            padding: 10px 15px;
            border-radius: 30px;
        }

        .avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            margin-right: 10px;
            border: 2px solid rgba(255, 255, 255, 0.5);
        }

        .user-details {
            text-align: left;
        }

        .nickname {
            font-size: 16px;
            font-weight: bold;
        }

        .promoter-id {
            font-size: 12px;
            opacity: 0.9;
        }

        /* 数据概览 */
        .overview {
            padding: 20px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            margin-top: 20px;
        }

        .overview-card {
            background: var(--card-bg);
            border-radius: 16px;
            padding: 20px;
            text-align: center;
            box-shadow: 0 4px 15px rgba(33, 150, 243, 0.1);
            transition: all 0.3s ease;
            border-top: 4px solid transparent;
        }

        .overview-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(33, 150, 243, 0.2);
        }

        .overview-card.personal {
            border-top-color: #FF9800;
        }

        .overview-card.business {
            border-top-color: #2196F3;
        }

        .overview-card.skill {
            border-top-color: #4CAF50;
        }

        .overview-icon {
            font-size: 32px;
            margin-bottom: 15px;
        }

        .overview-icon.personal {
            color: #FF9800;
        }

        .overview-icon.business {
            color: #2196F3;
        }

        .overview-icon.skill {
            color: #4CAF50;
        }

        .overview-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 10px;
            color: var(--text-medium);
        }

        .overview-count {
            font-size: 28px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .overview-reward {
            font-size: 16px;
            color: var(--success);
            font-weight: 600;
            background: rgba(76, 175, 80, 0.1);
            padding: 5px 10px;
            border-radius: 20px;
            display: inline-block;
        }

        /* 数据筛选 */
        .filter-bar {
            display: flex;
            justify-content: space-between;
            padding: 15px 20px;
            background: var(--card-bg);
            margin: 15px;
            border-radius: 15px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }

        .filter-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 8px 15px;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .filter-item.active {
            background: var(--primary-light);
            color: var(--primary);
        }

        .filter-item i {
            font-size: 20px;
            margin-bottom: 5px;
        }

        /* 明细表格 */
        .detail-section {
            margin: 20px 15px;
            background: var(--card-bg);
            border-radius: 20px;
            padding: 20px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        }

        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }

        .section-title {
            font-size: 20px;
            font-weight: bold;
            color: var(--text-dark);
            position: relative;
            padding-left: 15px;
            margin-bottom: 10px;
        }

        .section-title::before {
            content: "";
            position: absolute;
            left: 0;
            top: 5px;
            height: 20px;
            width: 5px;
            background: var(--primary);
            border-radius: 3px;
        }

        .date-selector {
            background: var(--primary-light);
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 14px;
            display: flex;
            align-items: center;
            color: var(--primary);
            font-weight: 500;
        }

        .date-selector i {
            margin-left: 8px;
        }

        .detail-table {
            width: 100%;
            border-collapse: collapse;
        }

        .detail-table th {
            text-align: left;
            padding: 12px 15px;
            font-weight: 600;
            color: var(--text-medium);
            border-bottom: 2px solid #eee;
        }

        .detail-table td {
            padding: 15px;
            border-bottom: 1px solid #f5f5f5;
        }

        .detail-table tr:last-child td {
            border-bottom: none;
        }

        .user-type {
            display: inline-block;
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
        }

        .user-type.personal {
            background: rgba(255, 152, 0, 0.1);
            color: #FF9800;
        }

        .user-type.business {
            background: rgba(33, 150, 243, 0.1);
            color: #2196F3;
        }

        .user-type.skill {
            background: rgba(76, 175, 80, 0.1);
            color: #4CAF50;
        }

        .reward-amount {
            font-weight: 600;
            color: var(--success);
        }

        /* 佣金规则说明 */
        .rules-section {
            margin: 20px 15px;
            background: var(--card-bg);
            border-radius: 20px;
            padding: 20px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        }

        .rule-item {
            display: flex;
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px solid #f5f5f5;
        }

        .rule-item:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
        }

        .rule-icon {
            width: 40px;
            height: 40px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            margin-right: 15px;
            flex-shrink: 0;
        }

        .rule-item.personal .rule-icon {
            background: rgba(255, 152, 0, 0.1);
            color: #FF9800;
        }

        .rule-item.business .rule-icon {
            background: rgba(33, 150, 243, 0.1);
            color: #2196F3;
        }

        .rule-item.skill .rule-icon {
            background: rgba(76, 175, 80, 0.1);
            color: #4CAF50;
        }

        .rule-content h3 {
            font-size: 16px;
            margin-bottom: 5px;
        }

        .rule-content p {
            font-size: 14px;
            color: var(--text-medium);
            line-height: 1.5;
        }

        /* 底部导航 */
        .footer {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            max-width: 750px;
            margin: 0 auto;
            background: var(--card-bg);
            display: flex;
            justify-content: space-around;
            padding: 12px 0;
            box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.08);
            z-index: 100;
            border-radius: 25px 25px 0 0;
        }

        .footer-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 12px;
            color: var(--text-medium);
            text-decoration: none;
            transition: all 0.3s ease;
            padding: 5px 15px;
            border-radius: 20px;
        }

        .footer-btn i {
            font-size: 22px;
            margin-bottom: 5px;
            transition: all 0.3s ease;
        }

        .footer-btn span {
            font-weight: 500;
        }

        .footer-btn.active, .footer-btn:hover {
            color: var(--primary);
            background: var(--primary-light);
        }

        .footer-btn.active i, .footer-btn:hover i {
            color: var(--primary);
            transform: translateY(-3px);
        }

        /* 响应式调整 */
        @media (max-width: 480px) {
            .overview {
                grid-template-columns: 1fr;
                gap: 12px;
            }
            
            .detail-table {
                font-size: 14px;
            }
            
            .detail-table th, 
            .detail-table td {
                padding: 10px 8px;
            }
            
            .filter-item {
                padding: 6px 10px;
                font-size: 13px;
            }
        }
    </style>
</head>
<body>
    <!-- 顶部区域 -->
    <div class="header">
        <div class="top-bar">
            <a href="#" class="back-btn">
                <i class="fas fa-arrow-left"></i>
            </a>
            <h1 class="page-title">推广统计中心</h1>
            <div class="user-info">
                <div class="avatar">张</div>
                <div class="user-details">
                    <div class="nickname">张推广员</div>
                    <div class="promoter-id">ID: PG2025001</div>
                </div>
            </div>
        </div>
        
        <div class="overview">
            <div class="overview-card personal">
                <div class="overview-icon personal">
                    <i class="fas fa-user-friends"></i>
                </div>
                <h3 class="overview-title">个人端会员</h3>
                <div class="overview-count">128人</div>
                <div class="overview-reward">+¥1,280</div>
            </div>
            
            <div class="overview-card business">
                <div class="overview-icon business">
                    <i class="fas fa-building"></i>
                </div>
                <h3 class="overview-title">企业端会员</h3>
                <div class="overview-count">24家</div>
                <div class="overview-reward">+¥8,750</div>
            </div>
            
            <div class="overview-card skill">
                <div class="overview-icon skill">
                    <i class="fas fa-graduation-cap"></i>
                </div>
                <h3 class="overview-title">技能传承商</h3>
                <div class="overview-count">16家</div>
                <div class="overview-reward">--</div>
            </div>
        </div>
    </div>

    <!-- 数据筛选 -->
    <div class="filter-bar">
        <div class="filter-item active">
            <i class="fas fa-calendar-day"></i>
            <span>今日</span>
        </div>
        <div class="filter-item">
            <i class="fas fa-calendar-week"></i>
            <span>本周</span>
        </div>
        <div class="filter-item">
            <i class="fas fa-calendar-alt"></i>
            <span>本月</span>
        </div>
        <div class="filter-item">
            <i class="fas fa-history"></i>
            <span>历史</span>
        </div>
    </div>

    <!-- 明细表格 -->
    <div class="detail-section">
        <div class="section-header">
            <h2 class="section-title">推广明细</h2>
            <div class="date-selector">
                2025年7月 <i class="fas fa-chevron-down"></i>
            </div>
        </div>
        
        <table class="detail-table">
            <thead>
                <tr>
                    <th>日期</th>
                    <th>推广对象</th>
                    <th>类型</th>
                    <th>佣金</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>07/12</td>
                    <td>李** (138****5678)</td>
                    <td><span class="user-type personal">个人端</span></td>
                    <td class="reward-amount">+¥10</td>
                </tr>
                <tr>
                    <td>07/12</td>
                    <td>王** (139****1234)</td>
                    <td><span class="user-type personal">个人端</span></td>
                    <td class="reward-amount">+¥10</td>
                </tr>
                <tr>
                    <td>07/12</td>
                    <td>张** (137****8765)</td>
                    <td><span class="user-type personal">个人端</span></td>
                    <td class="reward-amount">+¥10</td>
                </tr>
                <tr>
                    <td>07/12</td>
                    <td>陈** (136****4321)</td>
                    <td><span class="user-type personal">个人端</span></td>
                    <td class="reward-amount">+¥10</td>
                </tr>
                <tr>
                    <td>07/12</td>
                    <td>刘** (135****9876)</td>
                    <td><span class="user-type personal">个人端</span></td>
                    <td class="reward-amount">+¥10</td>
                </tr>
                <tr>
                    <td>07/12</td>
                    <td>上海创科有限公司</td>
                    <td><span class="user-type business">企业端</span></td>
                    <td class="reward-amount">+¥1,050</td>
                </tr>
                <tr>
                    <td>07/12</td>
                    <td>未来教育科技</td>
                    <td><span class="user-type business">企业端</span></td>
                    <td class="reward-amount">+¥1,400</td>
                </tr>
                <tr>
                    <td>07/12</td>
                    <td>精英技能传承中心</td>
                    <td><span class="user-type skill">技能传承</span></td>
                    <td class="reward-amount">--</td>
                </tr>
            </tbody>
        </table>
    </div>

    <!-- 佣金规则说明 -->
    <div class="rules-section">
        <h2 class="section-title">佣金规则说明</h2>
        
        <div class="rule-item personal">
            <div class="rule-icon">
                <i class="fas fa-user-friends"></i>
            </div>
            <div class="rule-content">
                <h3>个人端会员推广</h3>
                <p>每成功推广1名个人付费用户，可获得<strong>10元</strong>固定奖励。奖励在用户完成付费后实时发放。</p>
            </div>
        </div>
        
        <div class="rule-item business">
            <div class="rule-icon">
                <i class="fas fa-building"></i>
            </div>
            <div class="rule-content">
                <h3>企业端会员推广</h3>
                <p>每成功推广1家企业付费用户，可获得该企业<strong>实际付费金额×35%</strong>的佣金奖励。押金部分不计提佣金。</p>
            </div>
        </div>
        
        <div class="rule-item skill">
            <div class="rule-icon">
                <i class="fas fa-graduation-cap"></i>
            </div>
            <div class="rule-content">
                <h3>技能传承商推广</h3>
                <p>成功推广技能传承商目前仅记录数量，具体佣金政策将在后续公布。请关注平台通知。</p>
            </div>
        </div>
    </div>

    <!-- 底部导航 -->
    <div class="footer">
        <a href="#" class="footer-btn">
            <i class="fas fa-home"></i>
            <span>首页</span>
        </a>
        <a href="#" class="footer-btn">
            <i class="fas fa-chart-line"></i>
            <span>统计</span>
        </a>
        <a href="#" class="footer-btn active">
            <i class="fas fa-share-alt"></i>
            <span>推广</span>
        </a>
        <a href="#" class="footer-btn">
            <i class="fas fa-wallet"></i>
            <span>收益</span>
        </a>
        <a href="#" class="footer-btn">
            <i class="fas fa-user"></i>
            <span>我的</span>
        </a>
    </div>

    <script>
        // 筛选功能
        document.querySelectorAll('.filter-item').forEach(item => {
            item.addEventListener('click', function() {
                document.querySelectorAll('.filter-item').forEach(i => {
                    i.classList.remove('active');
                });
                this.classList.add('active');
                
                // 这里可以添加筛选逻辑
                const filterType = this.querySelector('span').textContent;
                alert(`切换到${filterType}数据`);
            });
        });
        
        // 日期选择器
        document.querySelector('.date-selector').addEventListener('click', function() {
            alert('打开日期选择器');
        });
        
        // 表格行点击效果
        document.querySelectorAll('.detail-table tbody tr').forEach(row => {
            row.addEventListener('click', function() {
                this.style.backgroundColor = 'var(--primary-light)';
                setTimeout(() => {
                    this.style.backgroundColor = '';
                }, 300);
            });
        });
        
        // 数据概览卡片动画
        document.querySelectorAll('.overview-card').forEach(card => {
            card.addEventListener('click', function() {
                const type = this.classList.contains('personal') ? '个人端' : 
                            this.classList.contains('business') ? '企业端' : '技能传承商';
                alert(`查看${type}详细数据`);
            });
        });
    </script>
</body>
</html>